<template>
  <div class="app">
    <h1>{{msg}}</h1>
    <!-- 子组件给父组件传递数据的方式 -->
    <!-- 第一种：通过父组件给子组件传递函数类型的props实现：子组件给父组件传递数据 -->
    <School :AppGetSchoolName="getSchoolName"/>

    <!-- 第二种：通过父组件给子组件绑定一个自定义事件实现：子组件给父组件传递数据 -->
    <!-- 给student组件的实例对象vc身上绑定了一个test1事件，如果有人触发了test1事件，那么demo函数就被调用 -->
    <Student v-on:test1="getStudentName" @test3="t1"/>
    <!-- 实现按钮只能点一次 -->
    <!-- <Student v-on:test1.once="getStudentName"/> -->
     <!-- 简写形式：  --> 
     <!--<Student @test1="getStudentName"/> -->

     <!-- 第三种：使用ref--在App挂载完毕给student组件绑定事件：子组件给父组件传递数据（和第二种原理一样，比第二种灵活）-->
     <Student ref="student"/>
  </div>
</template>

<script>
// 引入Student组件
import Student from './components/Student'
import School from './components/School'

export default {
    name:'App',
    data() {
      return {
        msg:'信息展示：'
      }
    },
    components:{
        Student,School
    },
    methods:{
      //获取学校名称
      getSchoolName(schoolName){
        console.log(schoolName)
      },
      //获取学生名称，如果是传递多个参数，指定第一个为studentName，其余参数不管，可以用...params代替
      getStudentName(studentName,...params){
        console.log('getStudentName被调用',studentName)
        console.log('params',params)
      },
      //获取学生名称2
      getStudentName2(studentName){
        console.log('getStudentName2被调用',studentName)
      },
      t1(){
        console.log('test3事件被触发。。。')
      }
    },
    mounted(){
      //在App组件加载后拿到Student的组件实例对象，给Student绑定自定义事件test2，当test2被触发的时候执行App组件中的this.getStudentName
      this.$refs.student.$on('test2',this.getStudentName2)
      // this.$refs.student.$once('test2',this.getStudentName2)  //只能点击一次
      //比如:App组件挂载3秒后，再给student组件绑定自定义事件
      // setTimeout(() => {
      //   this.$refs.student.$on('test2',this.getStudentName)
      // }, 3000);
    }
}
</script>

<style scoped>
.app{
  background-color:gray;
  padding: 3px;
}
</style>